<!--自定义流程配置 列表-->
<template>
  <div class="base-content workFlow-info">
    <!-- 流程列表 -->
    <div class="basic-info">
      <el-form ref="filterForm" :model="filterForm" inline>
        <el-form-item :label="dataList.WorkFlowName" prop="flowName">
          <el-select v-model="filterForm.flowName">
            <el-option key="0" :label="dataList.All" value="" />

            <el-option
              v-for="(item, index) in workFlowTypeList"
              :key="index"
              :label="item.name"
              :value="item.dictCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="getList('filter')"
            >{{ btn.Query }}</el-button
          >
          <el-button @click="cancelForm">{{ btn.Clear }}</el-button>
        </el-form-item>
        <el-row>
          <el-button
            v-rights="'Add'"
            type="primary"
            icon="el-icon-plus"
            @click="addWorkFlow"
            >{{ btn.Add }}</el-button
          >
        </el-row>
      </el-form>

      <!--列表-->
      <el-table
        v-loading="tableLoad"
        :data="tableData"
        tooltip-effect="dark"
        @row-dblclick="dbclick"
      >
        <el-table-column :label="dataList.number" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="flowName" :label="dataList.WorkFlowName" min-width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.flowName" disabled>
              <el-option
                v-for="(item, index) in workFlowTypeList"
                :key="index"
                :label="item.name"
                :value="item.dictCode"
              />
            </el-select>
            <!-- {{ workFlowTypeList[row.flowName] }} -->
          </template>
        </el-table-column>
        <el-table-column prop="flowType" :label="dataList.WorkFlowType" min-width="80">
          <template slot-scope="{ row }">
            <span v-if="row.flowType == 1">{{ dataList.SuperiorApproval }}</span>
            <span v-else>{{ dataList.SpecifyUserGroupApproval }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          :label="dataList.CreateTime"
          sortable
          min-width="120"
        />
        <el-table-column
          prop="updateTime"
          :label="dataList.UpdateTime"
          sortable
          min-width="120"
        />
        <el-table-column :label="btn.operate" width="140">
          <template slot-scope="{ row }">
            <div class="base-table-operation">
              <el-link type="primary" @click="lookFlowWork(row)">{{ btn.Look }}</el-link>
              <el-link
                v-rights="'Edit'"
                type="primary"
                @click="editWorkFlow(row)"
                >{{ btn.Edit }}</el-link
              >
              <el-link
                v-rights="'Delete'"
                type="danger"
                @click="delWorkFlow(row)"
                >{{ btn.Delete }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pageInfo.pageIndex"
        :page-count="pageCount"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />

      <!--新增/编辑/查看流程配置-->
      <WorkFlowDialog
        v-model="isShowDialog"
        :read-only="readOnlyInfo"
        :edit-id="editId"
        @success="workFlowDialogCall"
      />
    </div>
  </div>
</template>
<script>
import {
  GetWorkFlowMainList,
  DeleteWorkFlowMain,
} from "../../api/WorkFlow/WorkFlow";
import { getDictList } from "../../api/System/SystemDict";
export default {
  pageLoading: true,
  name: "WorkFlowList",
  components: {
    WorkFlowDialog: () => import("./WorkFlowDialog.vue"),
  },
  data() {
    return {
      filterForm: {
        flowName: "",
        Name: "",
      },
      searchLoading: false,
      tableLoad: true,
      isShowDialog: false,
      readOnlyInfo: false,
      editId: "",
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      workFlowTypeList: [],
      total: 0,
      pageCount: 0,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleWorkFlow.buttons");
    },
    dataList() {
      return this.$t("ModuleWorkFlow.WorkFlow");
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取流程列表
    getList(flag) {
      this.searchLoading = true;
      this.tableLoad = true;
      // flag === filter 表示流程输入了搜索条件 从第一页开始查
      if (flag) {
        this.pageInfo.pageIndex = 1;
      }
      //
      getDictList({ dictCode: "WorkFlow" }).then((res) => {
        this.workFlowTypeList = res.data;
      });
      // 流程列表
      GetWorkFlowMainList({
        ...this.filterForm,
        ...this.pageInfo,
      })
        .then((res) => {
          this.tableData = res.data.dataList;
          this.total = res.data.total;
          this.pageCount = res.data.total;
          this.tableLoad = false;
          this.searchLoading = false;
        })
        .catch(() => {
          this.tableLoad = false;
          this.searchLoading = false;
        });
    },

    // 查看流程详情
    lookFlowWork(row) {
      this.readOnlyInfo = true;
      this.editId = row.id;
      this.isShowDialog = true;
    },

    // 编辑流程
    editWorkFlow(row) {
      this.readOnlyInfo = false;
      this.editId = row.id;
      this.isShowDialog = true;
    },

    // 新增流程
    addWorkFlow() {
      this.readOnlyInfo = false;
      this.editId = "";
      this.isShowDialog = true;
    },

    // 删除流程
    delWorkFlow(row) {
      const _this = this;
      this.$confirm(this.$t("ModuleWorkFlow.buttons.IsDeleteFlow"), this.$t("ModuleWorkFlow.buttons.Delete"), {
        type: "warning",
        confirmButtonText: this.$t("ModuleWorkFlow.buttons.Confirm"),
        okType: "danger",
        center: true,
        cancelButtonText: this.$t("ModuleWorkFlow.buttons.Cancel"),
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            DeleteWorkFlowMain({ id: row.id })
              .then((res) => {
                // _this.$message.success('操作成功');
                _this.getList();
              })
              .finally(() => {
                instance.confirmButtonLoading = false;
                done();
              });
          } else {
            instance.confirmButtonLoading = false;
            done();
          }
        },
      });
    },

    // 新增/编辑/查看流程配置成功
    workFlowDialogCall() {
      this.getList();
    },

    // 双击行
    dbclick(row, column, event) { },

    // 清空筛选条件
    cancelForm() {
      this.$refs.filterForm.model.flowName = "";
      this.getList("filter");
    },

    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.workFlow-info {
  padding: 0;
  background: #f8fbff;
  display: flex;
  align-items: flex-start;
  .basic-info {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 28px 20px 0;
    box-sizing: border-box;
    position: relative;
    .el-table {
      margin-top: 12px;
    }
  }
}
</style>
